import { useState } from 'react'
import { Button, Image } from 'antd-mobile'
import { CloseOutline } from 'antd-mobile-icons'
import { type Training } from '../../services/dataService'
import ActionDetailPopup from './ActionDetailPopup'

interface TrainingInfoPopupProps {
  visible: boolean
  onClose: () => void
  training: Training | null
}

const TrainingInfoPopup = ({ visible, onClose, training }: TrainingInfoPopupProps) => {
  const [showActionDetail, setShowActionDetail] = useState(false)
  
  if (!visible || !training) return null

  const handleStartTraining = () => {
    onClose()
    // 这里可以跳转到训练页面
  }

  return (
    <>
      <div className="training-popup-overlay" onClick={onClose}>
        <div className="training-popup" onClick={(e) => e.stopPropagation()}>
          {/* 关闭按钮 */}
          <button className="popup-close-btn" onClick={onClose}>
            <CloseOutline />
          </button>

          {/* 训练标题和时间 */}
          <div className="popup-header">
            <h2 className="popup-title">拉伸</h2>
            <div className="popup-meta">2 训练 • 2 分钟</div>
        </div>

          {/* 训练列表 */}
          <div className="training-exercises">
            <div className="exercise-item" onClick={() => setShowActionDetail(true)}>
              <div className="exercise-image">
                <Image
                  src="/拉伸动作1.png"
                  alt="紧致肩胛骨肌拉伸"
                  width={60}
                  height={60}
                  fit="cover"
                />
              </div>
              <div className="exercise-info">
                <div className="exercise-name">紧致肩胛骨肌拉伸</div>
                <div className="exercise-duration">x 20</div>
              </div>
              <div className="exercise-status">1</div>
        </div>

            <div className="exercise-item" onClick={() => setShowActionDetail(true)}>
              <div className="exercise-image">
                <Image
                  src="/拉伸动作2.png"
                  alt="体侧屈腿侧肌拉伸"
                  width={60}
                  height={60}
                  fit="cover"
                />
              </div>
              <div className="exercise-info">
                <div className="exercise-name">体侧屈腿侧肌拉伸</div>
                <div className="exercise-duration">x 20</div>
                </div>
              <div className="exercise-status">2</div>
              </div>

            {/* 休息时间 */}
            <div className="rest-item">
              <div className="rest-icon">
                <div className="rest-circle">休息</div>
                </div>
              <div className="rest-info">
                <div className="rest-name">休息</div>
                <div className="rest-duration">0:30</div>
              </div>
            </div>
          </div>

          {/* 开始训练按钮 */}
          <div className="popup-footer">
          <Button 
              color="primary"
            size="large"
              block
            onClick={handleStartTraining}
              className="start-training-btn"
          >
            开始训练
          </Button>
        </div>
      </div>
      </div>

      {/* 动作详情弹窗 */}
      <ActionDetailPopup
        visible={showActionDetail}
        onClose={() => setShowActionDetail(false)}
        actionName="平板支撑"
        actionImage="/平板支撑.png"
      />

      <style>{`
        .training-popup-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.6);
          display: flex;
          align-items: flex-end;
          justify-content: center;
          z-index: 1000;
          animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }

        .training-popup {
          background: white;
          border-radius: 20px 20px 0 0;
          width: 100%;
          max-width: 400px;
          max-height: 70vh;
          position: relative;
          animation: slideUp 0.3s ease-out;
          display: flex;
          flex-direction: column;
        }

        @keyframes slideUp {
          from { transform: translateY(100%); }
          to { transform: translateY(0); }
        }

        .popup-close-btn {
          position: absolute;
          top: 16px;
          right: 16px;
          background: none;
          border: none;
          font-size: 20px;
          color: #666;
          cursor: pointer;
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 10;
        }

        .popup-header {
          padding: 24px 24px 16px;
          text-align: center;
          border-bottom: 1px solid #f0f0f0;
        }

        .popup-title {
          font-size: 18px;
          font-weight: bold;
          color: #333;
          margin: 0 0 8px 0;
        }

        .popup-meta {
          font-size: 14px;
          color: #666;
        }

        .training-exercises {
          flex: 1;
          padding: 16px 24px;
          overflow-y: auto;
        }

        .exercise-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 12px 0;
          cursor: pointer;
          transition: background 0.2s ease;
        }

        .exercise-item:hover {
          background: #f8f9fa;
          margin: 0 -12px;
          padding: 12px;
          border-radius: 8px;
        }

        .exercise-image {
          width: 60px;
          height: 60px;
          border-radius: 8px;
          overflow: hidden;
          flex-shrink: 0;
        }

        .exercise-info {
          flex: 1;
        }

        .exercise-name {
          font-size: 16px;
          font-weight: 600;
          color: #333;
          margin-bottom: 4px;
        }

        .exercise-duration {
          font-size: 14px;
          color: #666;
        }

        .exercise-status {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background: #f0f0f0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          color: #666;
          font-weight: 600;
        }

        .rest-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 12px 0;
          margin-top: 8px;
        }

        .rest-icon {
          width: 60px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .rest-circle {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: #ff6b35;
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-weight: bold;
        }

        .rest-info {
          flex: 1;
        }

        .rest-name {
          font-size: 16px;
          font-weight: 600;
          color: #333;
          margin-bottom: 4px;
        }

        .rest-duration {
          font-size: 14px;
          color: #666;
        }

        .popup-footer {
          padding: 16px 24px 24px;
          border-top: 1px solid #f0f0f0;
        }

        .start-training-btn {
          background: #ff6b35 !important;
          border: none !important;
          border-radius: 25px !important;
          height: 48px !important;
          font-size: 16px !important;
          font-weight: bold !important;
        }

        .start-training-btn:active {
          transform: scale(0.98);
        }

        /* 滚动条样式 */
        .training-exercises::-webkit-scrollbar {
          width: 4px;
        }

        .training-exercises::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 2px;
        }

        .training-exercises::-webkit-scrollbar-thumb {
          background: #ccc;
          border-radius: 2px;
        }

        .training-exercises::-webkit-scrollbar-thumb:hover {
          background: #999;
        }
      `}</style>
    </>
  )
}

export default TrainingInfoPopup

